<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-17 14:26:13
 * @Descripttion: 
-->
<template>
  <el-drawer
    :title="props.title"
    :model-value="props.drawer"
    :direction="rtl"
    :before-close="handleClose"
  >
    <div style="user-drawer">
      <el-form
        label-position="right"
        label-width="100px"
        :model="data.form"
        style="height: 90vh; overflow: auto"
        ref="form"
        :rules="rules"
      >
        <el-form-item
          v-for="item in formColumn"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
        >
          <el-input v-model="data.form[item.prop]"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitForm('numberValidateForm')">提交</el-button>
          <el-button @click="resetForm('numberValidateForm')" size="small">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  reactive,
  ref,
  watch,
  watchEffect,
} from "vue";
import { formColumn, rules } from "./util";
import { submit, getDetail } from "/@/api/HxUser";
let props = defineProps({
  drawer: Boolean,
  title: String,
  tableId: Number,
});
let emit = defineEmits();
let handleClose = (done) => {
  emit("closeDrawer");
  done();
};
let data = reactive({
  form: {
    account: "",
    password: "",
    name: "",
    realName: "",
    email: "",
    phone: "",
    // birthday: "",
    sex: "",
    // createUser: "",
    // createDept: "",
    // createTime: "",
    // updateUser: "",
    // updateTime: "",
    status: "",
  },
});
let form = ref(null);
let submitForm = () => {
  form.value.validate(async (valid) => {
    if (valid) {
      let res = await submit(data.form);
      if (res.code == 200) {
        emit("search");
        emit("closeDrawer");
      }
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
let resetForm = () => {
  form.value.resetFields();
  emit("closeDrawer");
};
watch(
  props,
  async (newProps) => {
    if (newProps.title == '编辑') {
      let res = await getDetail(newProps.tableId)
      data.form = { ...res.data }
    } else {
      for (const key in data.form) {
        if (Object.hasOwnProperty.call(data.form, key)) {
          data.form[key] = '';
        }
      }
    }
  }
);
</script>

<style lang="scss" scoped>
.user-drawer {
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 15px;
}
</style>